import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getChannelsActionCreator, updateCurrentAction } from '../store/action/channel';

export default function Channel() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getChannelsActionCreator());
  }, [dispatch]);

  const { list, current } = useSelector((state) => state.channel);

  const handleClick = (id) => {
    dispatch(updateCurrentAction(id));
  };
  return (
    <ul className="category">
      {list.map((item) => (
        <li
          key={item.id}
          className={current === item.id ? 'select' : ''}
          onClick={() => handleClick(item.id)}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}
